<template>
  <div>

    <el-form ref="loginForm"
             :rules="myrules"
             :model="loginForm"
             class="loginForm"
    >
      <h2>系统登录</h2>
      <el-form-item prop="username">
        <el-input type="text" v-model="loginForm.username" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input type="text" v-model="loginForm.code" style="width: 220px" placeholder="请输入验证码"></el-input>
        <el-image :src="captchaImg" class="captchaImg" title="看不清，换一张" @click="getCaptcha"></el-image>
      </el-form-item>
      <el-form-item>
        <el-checkbox checked="checked">记住我</el-checkbox>
        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data(){
    return{
      captchaImg: 'captcha?m='+new Date(),

      loginForm:{
        username: 'admin',
        password: '1234',
        code: 'abc'
      },
      myrules:{
        username:[ {required:true,message:'账号不能为空',trigger:'blur'}],
        password:[ {required:true,message:'密码不能为空',trigger:'blur'}],
        code:[ {required:true,message:'验证码不能为空',trigger:'blur'}]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        //业务判断
        if (valid) {
          this.loading=true;
          this.postRequest("login",this.loginForm).then(resp=>{
            if(resp) {

              if (resp.data.code === 200) {
               // console.log(resp);
                // let token = resp.data.data.token;
                 console.log(resp.data.data)
                //保存登录信息
                window.sessionStorage.setItem("user",JSON.stringify(resp.data.data));
                this.$router.replace({path:'/home'});
              }
            }
          })
        } else {
          this.$message.error('请输入完整信息');
          return false;
        }
      });
    },
    getCaptcha(){
      this.captchaImg= 'captcha?m='+new Date();
    }
  },
  created(){
    //this.getCaptcha();
  }
}
</script>

<style scoped>
.loginForm{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 100px auto;
  width: 350px;
  padding: 35px 15px 35px 15px;
  border: 1px solid #eaeaea;
  background: #ffffff;
  box-shadow: 0 0 25px #caeaea;
}
.captchaImg {
  float: right;
  margin-left: 8px;
  border-radius: 4px;
}

</style>
